<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>视频列表</title>
    <link rel="stylesheet " href="../static/video/css/reset.css" th:href="@{/video/css/reset.css}" />
    <link rel="stylesheet " href="../static/video/css/all.css" th:href="@{/video/css/all.css}" />
    <link rel="stylesheet " href="../static/video/css/grids.css" th:href="@{/video/css/grids.css}" />
    <link rel="stylesheet " href="../static/video/css/monitor.css" th:href="@{/video/css/monitor.css}" />
    <link rel="stylesheet " href="../static/video/css/imgMonitor.css" th:href="@{/video/css/imgMonitor.css}" />
</head>

<body class="monitor">
    <div class="wrapper grid-s9m0">
        <div class="col-main">
            <div class="main-wrap">
                <div class="monitor-container" style="width: 100%; height: 100%; padding-bottom: 0px;">
                    <div id="grids_div" class="grids" style="width: 100%; height: 100%;">
                        <div class="monitor-container">
                            <div class="grids">
                                <ul id="grids" class="clearfix">
                                    <li class="grid selected" index="0">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="1">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="2">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="3">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="4">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="5">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="6">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="7">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="8">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="9">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="10">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="11">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="12">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="13">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="14">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="15">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="16">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="17">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="18">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="19">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="20">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="21">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="22">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="23">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                    <li class="grid" index="24">
                                        <div class="ocx-container">
                                            <video id="videoPlay_2" width="100%" height="100%" name="videoPlay"
                                                controls="" playsinline="" webkit-playsinline="" autoplay=""
                                                style="object-fit: fill" src="">
                                                <source
                                                    src="http://hls.open.ys7.com/openlive/a523364e367a4ba4856d23bb5edc1b44.hd.m3u8"
                                                    type="application/x-mpegURL">
                                            </video>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="repeat monitor-toolbar">
                            <div class="window-bar">
                                <a class="tipS quicklySelect act-grids-square1" href="#" data-trigger="monitor.grids"
                                    data-template="square1" title=""><span class="ico"></span><i></i></a>
                                <a class="tipS quicklySelect act-grids-square4 active" href="#"
                                    data-trigger="monitor.grids" data-template="square4" title=""><span
                                        class="ico"></span><i></i></a>
                                <a class="tipS quicklySelect act-grids-square9" href="#" data-trigger="monitor.grids"
                                    data-template="square9" title=""><span class="ico"></span><i></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sub">
            <div id="tabContent" class="tab-container tab-grey ui-tabs ui-widget ui-widget-content ui-corner-all"
                style="bottom:0px;">
                <div class="tab-content">
                    <div id="monResource" class="ui-tabs-panel ui-widget-content ui-corner-bottom simple">
                        <div class="btn-toolbar clearfix">
                            <p style="color:#333;font-size:16px">视频列表</p>
                        </div>
                        <div class="treeview treeview_main">
                            <ul id="zTreea" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../static/video/js/jquery.min.js" th:src="@{/video/js/jquery.min.js}"></script>
    <script src="../static/video/js/jquery.resize.js" th:src="@{/video/js/jquery.resize.js}"></script>
    <script src="../static/video/js/imgMonitor.js" th:src="@{/video/js/imgMonitor.js}"></script>
    <script src="../static/video/js/ztree.js" th:src="@{/video/js/ztree.js}"></script>
    <script src="../static/video/js/res-tree.js" th:src="@{/video/js/res-tree.js}"></script>
    <script>
        //获取树的所有数据
        var level = 0;
        var res_id = 1;
        var res_level = 0;
        var res_auth = 0;
        var userOrgId = 1;
        var userOrgPath = '1';
        var resourceGroup = $.parseJSON(
            '{"id":"1","label":"陵水县智慧工地","isParent":true,"cls":"province","parentId":"null","children":[{"id":"107","label":"海南陵水英州土福湾一期","isParent":true,"cls":"town","parentId":"20","children":[{"id":"camera-44","label":"塔吊","isParent":false,"cls":"ico m-ball","parentId":"107","children":null,"extra":{"channelNo":1,"indexCode":"001130","ezvizCameraCode":null,"fav":0,"realId":"44","type":"res","orgId":107,"installWay":null},"checked":false,"chkDisabled":false,"isHidden":false,"open":false,"relationName":null},{"id":"camera-43","label":"加工厂","isParent":false,"cls":"ico m-ball","parentId":"107","children":null,"extra":{"channelNo":1,"indexCode":"001129","ezvizCameraCode":null,"fav":0,"realId":"43","type":"res","orgId":107,"installWay":null},"checked":false,"chkDisabled":false,"isHidden":false,"open":false,"relationName":null},{"id":"camera-42","label":"出入口","isParent":false,"cls":"ico m-gun","parentId":"107","children":null,"extra":{"channelNo":1,"indexCode":"001128","ezvizCameraCode":null,"fav":0,"realId":"42","type":"res","orgId":107,"installWay":null},"checked":false,"chkDisabled":false,"isHidden":false,"open":false,"relationName":null}],"extra":{"auth":2,"orgCode":"001754","type":"org"},"checked":false,"chkDisabled":false,"isHidden":false,"open":false},{"id":"217","label":"中国海南国际高铁技术研究中心及培训中心(1#、7#、8#、9#、","isParent":true,"cls":"town","parentId":"20","children":[{"id":"camera-538","label":"塔吊","isParent":false,"cls":"ico m-ball","parentId":"217","children":null,"extra":{"channelNo":1,"indexCode":"002120","ezvizCameraCode":null,"fav":0,"realId":"538","type":"res","orgId":217,"installWay":null},"checked":false,"chkDisabled":false,"isHidden":false,"open":false,"relationName":null},{"id":"camera-539","label":"加工厂","isParent":false,"cls":"ico m-ball","parentId":"217","children":null,"extra":{"channelNo":1,"indexCode":"002121","ezvizCameraCode":null,"fav":0,"realId":"539","type":"res","orgId":217,"installWay":null},"checked":false,"chkDisabled":false,"isHidden":false,"open":false,"relationName":null},{"id":"camera-540","label":"出入口","isParent":false,"cls":"ico m-gun","parentId":"217","children":null,"extra":{"disablecls":"disabledNode","channelNo":1,"indexCode":"002122","ezvizCameraCode":null,"fav":0,"realId":"540","type":"res","orgId":217,"installWay":null},"checked":false,"chkDisabled":false,"isHidden":false,"open":false,"relationName":null}],"extra":{"auth":2,"orgCode":"002109","type":"org"},"checked":false,"chkDisabled":false,"isHidden":false,"open":false},{"id":"218","label":"中国海南国际高铁技术研究中心及培训中心(12#展示中心,13#科","isParent":true,"cls":"town","parentId":"20","children":[{"id":"camera-537","label":"出入口","isParent":false,"cls":"ico m-gun","parentId":"218","children":null,"extra":{"channelNo":1,"indexCode":"002116","ezvizCameraCode":null,"fav":0,"realId":"537","type":"res","orgId":218,"installWay":null},"checked":false,"chkDisabled":false,"isHidden":false,"open":false,"relationName":null},{"id":"camera-536","label":"加工厂","isParent":false,"cls":"ico m-ball","parentId":"218","children":null,"extra":{"channelNo":1,"indexCode":"002115","ezvizCameraCode":null,"fav":0,"realId":"536","type":"res","orgId":218,"installWay":null},"checked":false,"chkDisabled":false,"isHidden":false,"open":false,"relationName":null},{"id":"camera-535","label":"塔吊","isParent":false,"cls":"ico m-ball","parentId":"218","children":null,"extra":{"channelNo":1,"indexCode":"002114","ezvizCameraCode":null,"fav":0,"realId":"535","type":"res","orgId":218,"installWay":null},"checked":false,"chkDisabled":false,"isHidden":false,"open":false,"relationName":null}],"extra":{"auth":2,"orgCode":"002110","type":"org"},"checked":false,"chkDisabled":false,"isHidden":false,"open":false}],"extra":{"auth":2,"orgCode":"46010603","type":"org"},"checked":false,"chkDisabled":false,"isHidden":false,"open":false}'
        )
        var hasExpandToUserOrg = 1;
        var playCamera;
        playCamera = function (cameraId, name, cameraIndexCode, capturetype, capturetime, timeRange, index) {
            alert(123)
            if (cameraIndexCode == null) {
                return;
            }
            if (index == null || index == undefined) {
                var captureNum = 4;
                var selectNum = getSelectNum();
                if (selectNum >= 0) {
                    $("#grids").find("li.selected .ocx-container img")[0].name = cameraIndexCode;

                    var html = '<div class="hoverToolbar"><div class="download"><a href="###" title="' + '下载' +
                        '"><i class="ico down_icon"></i></a></div><a class="imgClose" href="javascript:void(0)"></a></div>';
                    if ($("#grids").find("li.selected").find('.hoverToolbar').length == 0) {
                        $("#grids").find("li.selected").append(html);
                    }

                    //$($('[class="capture-img"]')[selectNum]).parents("li").removeClass('selected'); //去除选中
                    $("#grids li[index='" + selectNum + "']").removeClass('selected'); //去除选中
                    //点击关闭按钮
                    $('#grids li .imgClose').on("click", function () {
                        $(this).parents("li.grid").find("img").attr('src',
                            './images/transparent.png');
                        $(this).parents("li.grid").find("img").attr('name', '');
                        $(this).parent().remove();
                    });
                }
                index = selectNum;
                getNextSelect(captureNum, selectNum); //选中框弄到下一个
            }
            var frequency = capturetime;
            if (frequency == 0) {
                frequency = 60000;
            }
        }
        //选中框弄到下一个
        function getNextSelect(total, selectNum) {
            var i;
            for (i = 0; i < total; i++) {
                if ($('#grids li[index=' + i + ']').find('[class="capture-img"]').length && $('#grids li[index=' + i +
                        ']').find('[class="capture-img"]')[0].name == "") {
                    $('#grids li[index=' + i + ']').addClass("selected");
                    break;
                }
            }
            if (i == total) { //原来的再次选中
                $($('[class="capture-img"]')[selectNum]).parents("li").addClass("selected");
            }

        }

        function getSelectNum() {
            var result = 0;
            if ($("#grids").find("li.selected").length > 0) {
                result = $("#grids").find("li.selected").attr("index");
            }
            return result;
        }
    </script>
</body>

</html>